Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: add TypeScript plugin #902

Draft
wants to merge 64 commits into
base: main
Choose a base branch
from
Draft

feat: add TypeScript plugin #902

wants to merge 64 commits into from

Conversation

BioPhoton
Copy link
Collaborator

@BioPhoton BioPhoton commented Dec 23, 2024 •
edited
Loading

Implementation of the typescript plugin mentioned in #901. It uses the compiler programatically to retrieve TypeScript diagnostics for the compiler. Those diagnostice are mapped to audits and act like linting errors/warning.

NOTE
This is a PoC PR, when reviewing keep in mind that it will land in multiple smaller PR's.
The main reasoning behind the architecture is places in the related issue: #901

The Plugin:

The plugin enables you to incrementally migrate to new TS features or even versions.

Has multiple groups and audits:

  • 7 Groups
  • 47 Audits

A large set of supported compiler issues:

Groups Audit Count Code Count
languageAndEnvironment 12 33
interopConstraints 5 12
moduleResolution 5 11
typeCheckingBehavior 4 6
controlFlowOptions 3 4
buildEmitOptions 10 13
strict 8 46
Grand Total: 47 125

This PR includes:

  • implementation
  • unit tests
  • integration tests
  • e2e tests
  • user docs
  • code docs

Todos:

  • tsConfigPath: './tsconfig.json', should be optional
  • codes are commented
  • integration tests for all diagnostic issues
  • clean up mock data
  • refactor types
  • refactor post install logic

Proposed PR delivery:

  • changes in @code-pushup/utils
  • runner logic
  • plugin utils
  • plugin & usage
  • docs & CONTRIBUTING.md
  • e2e

closes #901

Example Portal:

Screenshot 2024-12-27 at 21 03 51

Example Md Report:

Code PushUp Report

🏷 Category ⭐ Score 🛡 Audits
Typescript 🟡 88 47

🏷 Categories

Typescript

🟡 Score: 88

🛡️ Audits

ModuleResolution (Typescript)

🟥 19 (score: 0)

Issues

Severity Message Source file Line(s)
🚨 error Cannot find module '@babel/parser'. Did you mean to set the 'moduleResolution' option to 'nodenext', or to add aliases to the 'paths' option? node_modules/@types/babel__core/index.d.ts 2
🚨 error Cannot find module '@babel/types'. Did you mean to set the 'moduleResolution' option to 'nodenext', or to add aliases to the 'paths' option? node_modules/@types/babel__core/index.d.ts 5
🚨 error Cannot find module '@babel/parser'. Did you mean to set the 'moduleResolution' option to 'nodenext', or to add aliases to the 'paths' option? node_modules/@types/babel__core/index.d.ts 10
🚨 error Cannot find module '@babel/types'. Did you mean to set the 'moduleResolution' option to 'nodenext', or to add aliases to the 'paths' option? node_modules/@types/babel__generator/index.d.ts 1
🚨 error Cannot find module '@babel/parser'. Did you mean to set the 'moduleResolution' option to 'nodenext', or to add aliases to the 'paths' option? node_modules/@types/babel__template/index.d.ts 1
🚨 error Cannot find module '@babel/types'. Did you mean to set the 'moduleResolution' option to 'nodenext', or to add aliases to the 'paths' option? node_modules/@types/babel__template/index.d.ts 2
🚨 error Cannot find module '@babel/types'. Did you mean to set the 'moduleResolution' option to 'nodenext', or to add aliases to the 'paths' option? node_modules/@types/babel__traverse/index.d.ts 1
🚨 error Cannot find module 'undici-types'. Did you mean to set the 'moduleResolution' option to 'nodenext', or to add aliases to the 'paths' option? node_modules/@types/node/globals.d.ts 6

📖 Docs

@github-actions github-actions bot added 📖 Project documentation improvements or additions to the project documentation 🔬 testing writing tests 🛠️ tooling labels Dec 23, 2024
@github-actions GitHub Actions
Copy link

github-actions bot commented Dec 23, 2024 •
edited
Loading

Code PushUp

🤨 Code PushUp report has both improvements and regressions – compared target commit 6ca1fc4 with source commit c219602.

🕵️ See full comparison in Code PushUp portal 🔍

🏷️ Categories

🏷️ Category ⭐ Previous score ⭐ Current score 🔄 Score change
Performance 🟡 58 🟡 54 ↓ −4.3
Code coverage 🟢 91 🟢 91 ↓ −0.1
Typescript n/a (*) 🟢 91 n/a (*)
Security 🟡 81 🟡 81 –
Updates 🟡 80 🟡 80 –
Accessibility 🟢 91 🟢 91 –
Best Practices 🟢 100 🟢 100 –
SEO 🟡 61 🟡 61 –
Bug prevention 🟢 100 🟢 100 –
Code style 🟢 100 🟢 100 –

(*) New category.

👎 2 groups regressed, 👍 3 audits improved, 👎 5 audits regressed, 10 audits changed without impacting score

🗃️ Groups

🔌 Plugin 🗃️ Group ⭐ Previous score ⭐ Current score 🔄 Score change
Lighthouse Performance 🟡 58 🟡 54 ↓ −4.3
Code coverage Code coverage metrics 🟢 91 🟢 91 ↓ −0.1

15 other groups are unchanged.

🛡️ Audits

🔌 Plugin 🛡️ Audit 📏 Previous value 📏 Current value 🔄 Value change
Lighthouse Largest Contentful Paint 🟨 3.0 s 🟨 3.6 s ↑ +19.5 %
Lighthouse Speed Index 🟨 4.9 s 🟨 5.3 s ↑ +8.3 %
Lighthouse First Contentful Paint 🟨 2.7 s 🟨 2.7 s ↓ −1.1 %
Lighthouse Total Blocking Time 🟥 2,710 ms 🟥 2,420 ms ↓ −10.6 %
Lighthouse Time to Interactive 🟥 12.2 s 🟥 12.9 s ↑ +5.8 %
Code coverage Line coverage 🟩 90.9 % 🟩 90.4 % ↓ −0.5 %
Code coverage Branch coverage 🟨 85.8 % 🟨 85.5 % ↓ −0.3 %
Code coverage Function coverage 🟩 93.1 % 🟩 93.2 % ↑ +0.1 %
Lighthouse Avoids enormous network payloads 🟩 Total size was 1,820 KiB 🟩 Total size was 1,816 KiB ↓ −0.2 %
Lighthouse Metrics 🟩 100% 🟩 100% ↑ +5.8 %
Lighthouse JavaScript execution time 🟥 5.3 s 🟥 6.0 s ↑ +13 %
Lighthouse Minimizes main-thread work 🟥 12.3 s 🟥 11.7 s ↓ −5 %
Lighthouse Max Potential First Input Delay 🟥 1,860 ms 🟥 1,670 ms ↓ −10.2 %
Lighthouse Uses efficient cache policy on static assets 🟨 28 resources found 🟨 28 resources found ↑ +0.1 %
Lighthouse Eliminate render-blocking resources 🟥 Potential savings of 830 ms 🟥 Potential savings of 910 ms ↑ +9.7 %
Lighthouse Initial server response time was short 🟩 Root document took 400 ms 🟩 Root document took 320 ms ↓ −19.6 %
Lighthouse Server Backend Latencies 🟩 100 ms 🟩 60 ms ↓ −39 %
Lighthouse Network Round Trip Times 🟩 20 ms 🟩 20 ms ↓ −37.8 %

569 other audits are unchanged.

@vmasek
Copy link
Collaborator

vmasek commented Dec 25, 2024

Amazing work, can't wait to give it a try in some big project, I had a brief look but I'll review later (🤔 is this a 🎄🎁?)

BioPhoton
BioPhoton commented Dec 28, 2024
View reviewed changes
package.json Outdated Show resolved Hide resolved
BioPhoton
BioPhoton commented Dec 28, 2024
View reviewed changes
package.json Outdated Show resolved Hide resolved
BioPhoton
BioPhoton commented Dec 28, 2024
View reviewed changes
packages/plugin-typescript/README.md
Comment on lines +158 to +163
{
slug: 'language-and-environment',
weight: 1,
type: 'group',
plugin: 'typescript',
},
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

here we should mention the helper

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees

@BioPhoton BioPhoton

Labels
📖 Project documentation improvements or additions to the project documentation 🔬 testing writing tests 🛠️ tooling 🧩 utils
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

TypeScript Plugin
3 participants
@BioPhoton @vmasek @aramirezj